/*
    创建者：shuxiaokai
    创建时间：2021-09-10 22:44
    模块名称：预览界面
    备注：
*/
<template>
    <s-loading :loading="loading" class="doc-detail">
        <el-icon :size="18" class="close" @click="handleClose">
            <Close />
        </el-icon>
        <div class="params-view">
            <s-fieldset v-if="apidocInfo?.item.url" :title="$t('基本信息')">
                <s-label-value label="请求方式：" class="w-50">
                    <template v-for="(req) in validRequestMethods">
                        <span v-if="apidocInfo?.item.method.toLowerCase() === req.value.toLowerCase()" :key="req.name" class="label" :style="{color: req.iconColor}">{{ req.name.toUpperCase() }}</span>
                    </template>
                </s-label-value>
                <s-label-value label="请求地址：" class="w-50 mt-2">
                    <span class="text-ellipsis">{{ apidocInfo?.item.url.path }}</span>
                </s-label-value>
                <s-label-value label="接口名称：" class="w-50">
                    <div>{{ apidocInfo?.info.name }}</div>
                </s-label-value>
                <s-label-value label="标签信息：" class="w-50">
                    <div v-if="apidocInfo?.info.tag && apidocInfo?.info.tag.name">
                        <span :style="{color: apidocInfo?.info.tag.color}">{{ apidocInfo?.info.tag.name }}</span>
                    </div>
                </s-label-value>
                <div v-if="apidocInfo" class="base-info">
                    <s-label-value label="维护人员：" :title="apidocInfo.info.maintainer || apidocInfo.info.creator" label-width="auto" class="w-50">
                        <span class="text-ellipsis">{{ apidocInfo.info.maintainer || apidocInfo.info.creator }}</span>
                    </s-label-value>
                    <s-label-value label="创建人员：" :title="apidocInfo.info.maintainer || apidocInfo.info.creator" label-width="auto" class="w-50">
                        <span class="text-ellipsis">{{ apidocInfo.info.maintainer || apidocInfo.info.creator }}</span>
                    </s-label-value>
                    <s-label-value label="更新日期：" :title="$helper.formatDate(apidocInfo.updatedAt)" label-width="auto" class="w-50">
                        <span class="text-ellipsis">{{ $helper.formatDate(apidocInfo.updatedAt) }}</span>
                    </s-label-value>
                    <s-label-value label="创建日期：" :title="$helper.formatDate(apidocInfo.createdAt)" label-width="auto" class="w-50">
                        <span class="text-ellipsis">{{ $helper.formatDate(apidocInfo.createdAt) }}</span>
                    </s-label-value>
                </div>
            </s-fieldset>
            <s-fieldset v-if="!apidocInfo?.isFolder" :title="$t('请求参数')" class="mb-5">
                <template v-if="hasQueryParams">
                    <div class="title">{{ $t("Query参数") }}</div>
                    <s-params-view :data="apidocInfo?.item.queryParams" plain class="mb-3"></s-params-view>
                </template>
                <template v-if="hasPathsParams">
                    <div class="title">{{ $t("Path参数") }}</div>
                    <s-params-view :data="apidocInfo?.item.paths" plain class="mb-3"></s-params-view>
                </template>
                <template v-if="hasJsonBodyParams">
                    <div class="title">{{ $t("Body参数") }}(application/json)</div>
                    <s-params-view :data="apidocInfo?.item.requestBody.json"></s-params-view>
                </template>
                <template v-if="hasFormDataParams">
                    <div class="title">{{ $t("Body参数") }}(multipart/formdata)</div>
                    <s-params-view :data="apidocInfo?.item.requestBody.formdata" plain></s-params-view>
                </template>
                <template v-if="hasUrlEncodedParams">
                    <div class="title">{{ $t("Body参数") }}(x-www-form-urlencoded)</div>
                    <s-params-view :data="apidocInfo?.item.requestBody.urlencoded" plain></s-params-view>
                </template>
                <template v-if="hasRawParams">
                    <div class="title">{{ $t("Body参数") }}({{ apidocInfo?.item.requestBody.raw.dataType }})</div>
                    <pre>{{ apidocInfo?.item.requestBody.raw.data }}</pre>
                </template>
                <div v-if="!hasQueryParams && !hasPathsParams && !hasJsonBodyParams && !hasFormDataParams && !hasUrlEncodedParams && !hasRawParams">{{ $t("暂无数据") }}</div>
            </s-fieldset>
            <s-fieldset v-if="!apidocInfo?.isFolder" :title="$t('返回参数')">
                <div v-for="(item, index) in apidocInfo?.item.responseParams" :key="index" class="title">
                    <div class="mb-2">
                        <span>{{ $t("名称") }}：</span>
                        <span>{{ item.title }}</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>{{ $t("状态码") }}：</span>
                        <span>{{ item.statusCode }}</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>{{ $t("返回格式") }}：</span>
                        <span>{{ item.value.dataType }}</span>
                    </div>
                    <s-params-view v-if="item.value.dataType === 'application/json'" :data="item.value.json"></s-params-view>
                    <div v-if="item.value.dataType === 'application/xml' || item.value.dataType === 'text/plain' || item.value.dataType === 'text/html'" class="h-150px">
                        <s-raw-editor :data="item.value.json" :type="item.value.dataType" readonly></s-raw-editor>
                    </div>
                </div>
            </s-fieldset>
            <s-fieldset v-if="!apidocInfo?.isFolder" :title="$t('请求头')">
                <template v-if="hasHeaders">
                    <s-params-view :data="apidocInfo?.item.headers" plain class="mb-3"></s-params-view>
                </template>
                <div v-else>{{ $t("暂无数据") }}</div>
            </s-fieldset>
        </div>
    </s-loading>
</template>

<script lang="ts" setup>
import { ref, Ref, onMounted, computed } from "vue"
import { Close } from "@element-plus/icons-vue"
import { ApidocDetail, Response } from "@@/global";
import { router } from "@/router/index"
import { axios } from "@/api/api"
import { store } from "@/store/index"

const emit = defineEmits(["close"])
const props = defineProps({
    id: {
        type: String,
        default: ""
    },
});
/*
|--------------------------------------------------------------------------
| 获取文档详情
|--------------------------------------------------------------------------
*/
const docDetail: Ref<ApidocDetail | null> = ref(null); //文档详情
const projectId = router.currentRoute.value.query.id as string;
const loading = ref(false); //数据加载
//获取文档详情
const getDocDetail = () => {
    loading.value = true;
    const params = {
        _id: props.id,
        projectId,
    };
    axios.get<Response<ApidocDetail>, Response<ApidocDetail>>("/api/project/doc_detail", { params }).then((res) => {
        docDetail.value = res.data
    }).catch((err) => {
        console.error(err);
    }).finally(() => {
        loading.value = false;
    });
}
onMounted(() => {
    getDocDetail();
})
/*
|--------------------------------------------------------------------------
| 参数是否存在判断
|--------------------------------------------------------------------------
*/
const apidocInfo = computed(() => docDetail.value);
//是否存在查询参数
const hasQueryParams = computed(() => {
    if (!docDetail.value) {
        return false;
    }
    const { queryParams } = docDetail.value.item;
    return queryParams.filter(p => p.select).some((data) => data.key);
})
//是否存在path参数
const hasPathsParams = computed(() => {
    if (!docDetail.value) {
        return false;
    }
    const { paths } = docDetail.value.item;
    return paths.some((data) => data.key);
})
//是否存在body参数
const hasJsonBodyParams = computed(() => {
    if (!docDetail.value) {
        return false;
    }
    const { contentType } = docDetail.value.item;
    const { mode } = docDetail.value.item.requestBody;
    return contentType === "application/json" && mode === "json";
})
//是否存在formData参数
const hasFormDataParams = computed(() => {
    if (!docDetail.value) {
        return false;
    }
    const { contentType } = docDetail.value.item;
    return contentType === "multipart/form-data";
})
//是否存在formData参数
const hasUrlEncodedParams = computed(() => {
    if (!docDetail.value) {
        return false;
    }
    const { contentType } = docDetail.value.item;
    return contentType === "application/x-www-form-urlencoded";
})
//raw类型返回参数
const hasRawParams = computed(() => {
    if (!docDetail.value) {
        return false;
    }
    const { mode, raw } = docDetail.value.item.requestBody;
    return mode === "raw" && raw.data;
})
//是否存在headers
const hasHeaders = computed(() => {
    if (!docDetail.value) {
        return false;
    }
    const { headers } = docDetail.value.item;
    return headers.filter(p => p.select).some((data) => data.key);
})
const validRequestMethods = computed(() => store.state["apidoc/baseInfo"].rules.requestMethods)

/*
|--------------------------------------------------------------------------
| 其他操作
|--------------------------------------------------------------------------
*/

//关闭弹窗
const handleClose = () => {
    emit("close");
}

</script>

<style lang="scss">
.doc-detail {
    width: size(800);
    overflow: hidden;
    position: relative;
    .params-view {
        max-height: 65vh;
        overflow-y: auto;
        padding: 0 size(10);
        margin-top: size(30);
        .copy-json {
            cursor: pointer;
            &:hover {
                color: lighten($gray-300, 20%);
            }
        }
    }
    .close {
        @include rt-close;
        font-size: fz(22);
    }
}
</style>
